<!-- add by lty 20181222 -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>添加服务预约地址</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/address.css">

    <script src="js/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/address.js"></script>
 <script src="../js/request.js"></script>
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
  </head>
  <body>
    <div class="page">
      <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left" href="javascript:window.history.back();" data-transition='slide-out'>
          <span class="icon icon-left"></span>
        </a>
        <h1 class="title">添加服务预约地址</h1>
        <a href="javascript:;" class="add_address--btn">
          确定
        </a>
      </header>

      <!-- 主体内容 -->
      <div class="A_content">
        <div class="address-block">
          <ul>
            <li class="address-content cl">
              <div class="address-title fl">城市</div>
              <div class="address--result fl" id='city'>珠海市</div>
            </li>
            <li class="address-content open-panel cl" data-panel='#panel-left-demo'>
              <div class="address-title fl">区域</div>
              <div class="address--result no-result fl" id="area-result">请选择区域</div>
              <i class="icon icon-right fr"></i>
            </li>
<!--             <li class="address-content open-panel cl" data-panel='#panel-left-demo2'> -->
<!--               <div class="address-title fl">小区</div> -->
<!--               <div class="address--result no-result fl" id="community-result">请选择小区</div> -->
<!--               <i class="icon icon-right fr"></i> -->
<!--             </li> -->
			<li class="address-content cl">
              <div class="address-title fl">小区：</div>
              <input type="text" class="address--input" id="community-result" placeholder="小区名称" />
            </li>
            <li class="address-content cl">
              <div class="address-title fl">详细地址：</div>
              <input type="text" class="address--input" id="address-detail" placeholder="如道路、门牌号、楼栋号等" />
            </li>
          </ul>
        </div>
        
      </div>
    </div>

    <!-- 打开侧栏 -->
    <div class="panel-overlay"></div>
    <!-- Left Panel with Reveal effect -->
    <div class="panel panel-left panel-reveal" id='panel-left-demo'>
      <div class="content-block">
        <p>请选择区域</p>
      </div>
      <ul class="area-list" id="areaList">
        <!-- <li class="close-panel">高新区1</li>
        <li class="close-panel">高新区2</li>
        <li class="close-panel">高新区3</li> -->
      </ul>
    </div>
<!--   <div class="panel panel-left panel-reveal" id='panel-left-demo2'>
      <div class="content-block">
        <p>请选择小区</p>
        Click on link with "close-panel" class will close panel
        <p><a href="#">关闭</a></p>
      </div>
      <ul class="area-list" id="communityList">
        <li class="close-panel">翠湖香山</li>
        <li class="close-panel">华策帝景湾</li>
        <li class="close-panel">绿景后湾</li>
      </ul>
    </div>  -->
    <script type="text/javascript">
    var serviceId = Request.queryString("serviceId");
	var months = Request.queryString("months");
	var price = Request.queryString("price");
	var chargesType = Request.queryString("chargesType");
	var cityName = "珠海市";
	 var path = "/LanJuPublic";
	$(function(){
		loadArea(cityName);
	})
	function loadArea(cityName){
		$.ajax({
			url : path+"/service/queryAreaByCity.do",
			data : {
				cityName: cityName
			},
			type : "POST",
			dataType : 'json',
			cache : false,
			success : function(ret){
				if(ret.rows && ret.rows.length>0){
					var html = "";
					$.each(ret.rows,function(i,n){
						html+="<li class='close-panel'>"+n.areaName+"</li>";
					});
					$("#areaList").html(html);
				}
			}
		})
	}
	
	function loadCommunity(areaName){
		$.ajax({
			url : path+"/service/queryCommunityByArea.do",
			data : {
				areaName: areaName
			},
			type : "POST",
			dataType : 'json',
			cache : false,
			success : function(ret){
				if(ret.rows && ret.rows.length>0){
					var html = "";
					$.each(ret.rows,function(i,n){
						html+="<li class='close-panel'>"+n.community_name+"</li>";
					});
					$("#communityList").html(html);
				}
			}
		})
	}
    </script>
  </body>
</html>